<script setup lang="ts">
import type { SellRecordApi } from '@/apis'
import { TeacherApi } from '@/apis/teacher'
import { useForm, useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import SellRecordList from '@/views/shop/sell/SellRecordList.vue'

defineOptions({
  name: 'MySellRecord',
})

const userStore = useUserStore()
const { form } = useForm<SellRecordApi.SellRecordQuery>({
  term: undefined,
  campusId: undefined,
  subject: undefined,
  classYear: undefined,
  grade: undefined,
  startDate: undefined,
  endDate: undefined,
  sellerId: userStore.userInfo.id,
  valid: true,
})

const {
  tableData,
  loading,
  pagination,
  search,
} = useTable(pagination => TeacherApi.getMySellRecordPage({ ...form, ...pagination }))

const onSearch = async () => {
  search()
}
</script>

<template>
  <ProPage title="顾问业绩明细">
    <a-space direction="vertical" size="medium">
      <a-space>
        <label class="label">学期年级</label>
        <YearTermCascader v-model:class-year="form.classYear" v-model:term="form.term" class="!min-w-200px" check-strictly />
        <DictSelect v-model="form.grade" type="select" code="Grade" placeholder="年级" class="!min-w-120px" multiple />
        <DictSelect v-model="form.subject" type="select" code="Subject" placeholder="科目" class="!min-w-120px" />
        <a-button type="primary" @click="onSearch">
          搜索
        </a-button>
      </a-space>

      <a-space>
        <label class="label">其他条件</label>
        <RangePicker v-model:from="form.startDate" v-model:to="form.endDate" :time="false" />
      <!-- <ClassroomCascader v-model:campus-id="form.campusId" class="!min-w-200px" check-strictly /> -->
      </a-space>
    </a-space>
    <SellRecordList :records="tableData" :loading="loading" :pagination="pagination" :editable="false" />
  </ProPage>
</template>

<style scoped>

</style>
